/* 
图片分类页面
*/

<template>
  <view>
    <view class="category_tab">
      <!-- 标题 开始 -->
      <view class="category_tab_title">
        <!-- 分段器 -->
        <view class="title_inner">
          <uni-segmented-control
            :current="current"
            :values="items.map((v) => v.title)"
            @clickItem="onClickItem"
            style-type="text"
            active-color="#d4237a"
          >
          </uni-segmented-control>
          <!-- 搜索按钮 -->
          <view class="iconfont iconsearch"></view>
        </view>
      </view>
      <!-- 标题 结束 -->

      <!-- 内容 开始 -->
      <scroll-view
        v-if="category.length !== 0"
        class="category_tab_content"
        @scrolltolower="handleScrollToLower"
        scroll-y
        enable-flex
      >
        <view class="content_item" v-for="item in category" :key="item.id">
          <image :src="item.thumb" mode="aspectFill" />
        </view>
      </scroll-view>
      <!-- 内容 结束 -->

      <!-- 没有数据 -->
      <view class="no_data" v-else>
        <text>暂无数据</text>
      </view>
    </view>
  </view>
</template>

<script>
import { uniSegmentedControl } from '@dcloudio/uni-ui';

export default {
  data() {
    return {
      // 分段器
      current: 0,
      items: [
        { title: '最新', order: 'new' },
        { title: '热门', order: 'hot' }
      ],
      // 请求参数
      params: {
        limit: 30,
        skip: 0,
        order: 'new'
      },
      // 图片分类数据
      category: [],
      id: 0,
      // 是否还有下一页数据
      hasMore: true
    };
  },
  components: {
    uniSegmentedControl
  },
  onLoad(option) {
    this.id = option.id;
    this.getCategory();
  },
  methods: {
    /* 
    点击分段器
    1 根据被点击的标题 切换标题
    2 切换 order
    3 发送请求
    */
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      } else {
        // 点击的是相同的标题
        return false;
      }

      this.params.order = this.items[e.currentIndex].order;
      this.params.skip = 0;
      this.category = [];
      this.getCategory();
    },
    // 获取图片分类数据
    getCategory() {
      this.request({
        url: `http://157.122.54.189:9088/image/v1/vertical/category/${this.id}/vertical`,
        data: this.params
      }).then((result) => {
        if (!result.res.vertical.length) {
          this.hasMore = false;
          uni.showToast({
            title: '没有数据了~',
            icon: 'none'
          });
          return false;
        }

        this.category = [...this.category, ...result.res.vertical];
      });
    },
    // 滚动触底
    handleScrollToLower() {
      if (this.hasMore) {
        // 1 修改请求参数
        this.params.skip += this.params.limit;
        // 2 发送请求
        this.getCategory();
        // 3 请求成功
      } else {
        uni.showToast({
          title: '没有数据了~',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  position: relative;
}

.category_tab {
  .category_tab_title {
    position: relative;
    // 分段器
    .title_inner {
      width: 60%;
      margin: 0 auto;
    }
    .iconsearch {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 5%;
    }
  }
  .category_tab_content {
    display: flex;
    flex-wrap: wrap;
    height: calc(100vh - 36px);
    .content_item {
      width: 33.33%;
      border: 5rpx solid #fff;
      image {
        height: 500rpx;
      }
    }
  }
  // 没有数据
  .no_data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text {
      color: $color;
      font-size: 40rpx;
    }
  }
}
</style>